/*
 * @Version: 1.0
 * @Autor: yuchang
 * @Date: 2024-01-12 17:27:59
 * @LastEditors: yangfumin
 * @LastEditTime: 2024-01-30 17:38:41
 * @Description:
 */
import addImg from '@/assets/Icon/addImg.png'
import undraw from '@/assets/Icon/undraw_wishes_icyp.svg'
import { connect } from 'dva'
import { Component } from 'react'
import { CompanyAdd, Details, TreeNode } from './components'
import styles from './styles.less'

function mapStateToProps({ globalModel, orgModel }) {
  return {
    globalModel: globalModel,
    orgModel: orgModel,
  }
}
@connect(mapStateToProps)
export default class Framework extends Component {
  constructor(props) {
    super(props)
    this.state = {
      companyAdd: false,
      status: 1, //右侧组件控制
      treeData: [], //企业架构
    }
  }

  componentDidMount() {
    this.getTree()
  }

  //获取架构数据
  getTree = () => {
    this.props.dispatch({
      type: 'orgModel/getOrganizationEffects',
      payload: {
        params: {},
        callback: (data) => {
          if (data) {
            this.setState({ treeData: data })
            if (data.length <= 0) {
              this.rightStatus(1)
            }
          }
        },
      },
    })
  }
  //新增
  addHomeList = () => {
    let { treeData } = this.state
    this.props.dispatch({
      type: 'orgModel/setCheckOrg',
      payload: treeData[0],
    })
    this.setState({
      companyAdd: true,
    })
  }
  //关闭弹窗
  closeVisible = () => {
    this.setState({
      companyAdd: false,
    })
    this.getTree()
  }
  //修改右侧显示模块
  rightStatus = (value) => {
    this.setState({
      status: value,
    })
  }

  componentWillUnmount() {}

  render() {
    const { treeData, companyAdd, status } = this.state
    console.log(treeData, 'treeData')
    return (
      <div className={styles.normal}>
        <div className={styles.modelTitle}>组织架构</div>
        <div className={styles.content}>
          <div className={styles.leftBox}>
            {treeData.length > 0 && (
              <TreeNode
                treeList={treeData}
                addVisible={this.addHomeList}
                rightStatus={this.rightStatus}
                getTree={this.getTree}
              />
            )}
          </div>
          <div className={styles.rightBox}>
            {
              status == 1 ? (
                <>
                  <img src={undraw} alt="" style={{ width: '240px', height: '240px' }} />
                  <div className={styles.rightText} style={{ marginTop: '21px' }}>
                    暂无组织架构详情信息
                  </div>
                  <div className={styles.rightText}>请先从左侧选取所需组织进行详情查看或点击下方按钮进行快速新建</div>
                  <div className={styles.addBtn} onClick={this.addHomeList}>
                    <img src={addImg} alt="" style={{ width: '21px', height: '21px' }} />
                    <span style={{ color: '#fff', marginleft: '5px' }}>新建组织</span>
                  </div>
                </>
              ) : status == 2 ? (
                <Details rightStatus={this.rightStatus} getTree={this.getTree} />
              ) : null //
            }
          </div>
        </div>
        {companyAdd && <CompanyAdd companyAdd={companyAdd} closeVisible={this.closeVisible} />}
      </div>
    )
  }
}
